<template>
    <div class="login-container">
        <b-container class="bv-example-row">
            <b-row class="justify-content-md-center">
                <b-col sm="12" md="6" lg="4">
                    <a-card title="登录">
                        <Form ref="formInline" :model="formInline" :rules="ruleInline" >
                            <FormItem prop="phone">
                                <Input type="text" v-model="formInline.phone" placeholder="phone">
                                    <Icon type="ios-call-outline" slot="prepend"></Icon>
                                </Input>
                            </FormItem>
                            <FormItem prop="password">
                                <Input type="password" v-model="formInline.password" placeholder="Password">
                                    <Icon type="ios-lock-outline" slot="prepend"></Icon>
                                </Input>
                            </FormItem>
                            <FormItem>
                                <Button type="success" @click="handleSubmit('formInline')" long>登录</Button>
                            </FormItem>
                        </Form>
                        <div class="extra">
                            <p>
                                <a href="">忘记密码？</a>
                            </p>
                            <p>
                                <span>尚未拥有账户?</span><router-link to="/register">注册</router-link>
                            </p>
                        </div>
                    </a-card>
                </b-col>
            </b-row>
        </b-container>
  </div>
</template>

<script>
export default {
    data () {
        return {
            formInline: {
                phone: '',
                password: ''
            },
            ruleInline: {
                phone: [
                    { required: true, message: '请填写电话号码', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请填写密码', trigger: 'blur' },
                    { type: 'string', min: 6, message: '请注意密码不少于6位', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    // this.$Message.success('Success!');
                    this.$http.post(
                        "user/login",
                        JSON.stringify({
                            "uAccount":this.formInline.phone,
                            "uPass":this.formInline.password
                        })
                        ).then(result => {
                        if(result.body.code == 200){
                            // console.log(result.body);
                            sessionStorage.setItem("uName", result.body.object,uName);
                            this.$store.dispatch("setUser", result.body.object,uName);
                            
                            
                        }
                    })
                } else {
                    this.$Message.error('Fail!');
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.login-container{
    margin-top:2rem;
    .extra{
        text-align: center;
    }
}
</style>